<template>
  <div style="height: 100%; overflow:hidden" class="main">
    <!-- <x-header :left-options="{preventGoBack:true,backText: ''}" @on-click-back="backhome">隐患上报<div id="headeright"  @click="dangereport">上报</div></x-header> -->
    <x-header :left-options="{preventGoBack:true,backText: ''}" @on-click-back="backhome">
      安全检查
      <!-- <x-icon id="headeright" type="ios-plus-empty" size="30" @click="dangereport"></x-icon> -->
      <!-- <img slot="right"
           src="@/assets/img/online_start.png"
           @click="dangereport"
           id="headeright"
      v-if="this.dangerArr.includes('0')" />-->
      <img
        slot="right"
        src="@/assets/img/white_change.png"
        class="changeToOffline"
        @click="changeToOffline"
      />
    </x-header>
    <!-- <div class="add_form"
         @click="dangereport"
    v-if="this.dangerArr.includes('0')" >发起</div>-->
    <div class="add_form_new" @click="dangereport" v-if="this.dangerArr.includes('0')">发起</div>
    <group>
      <tab bar-position="bottom">
        <tab-item :selected="flagC" @on-item-click="onCheckClick">检查单</tab-item>
        <tab-item @on-item-click="onRectifyClick" :selected="flagR">整改单</tab-item>
      </tab>
      <div class="sup"></div>
      <cell is-link link="proList" v-if="flagC">
        <span slot="title" class="select_pro">{{showPro(pro)}}</span>
      </cell>
      <cell is-link link="proListR" v-if="flagR">
        <span slot="title" class="select_pro">{{showPro(pmname_back)}}</span>
      </cell>
      <!-- <select-project 
        :title="tempTitle" 
        formType="inspection" 
        module="danger" 
        status="view" 
        @selectAllPro="selectAllPro"
      @selectPro="selectPro"></select-project>-->
    </group>
    <div class="sup"></div>
    <div class="main-container" style="overflow:auto;height:86%">
      <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">
        <scroller :on-refresh="refresh" :on-infinite="infinite" ref="taskScroller">
          <!-- <scroller  :on-infinite="infinite" ref="taskScroller"> -->
          <!-- content -->
          <!-- <scroller> -->
          <!-- <div v-bind:class="{check:this.flagC,rectify:this.flagR}"> -->

          <div v-if="flagC">
            <!-- <group v-for="(item, i) in list"
                   gutter="-1px"
                   class="group-control"
                   :key="i">
              <div title
                   :border-intent="false"
                   @click="openInfo(item)">
                <div class="more-box"
                     style="margin-left: 30px;margin-right: 30px;margin-bottom: 15px;margin-top: 15px;">
                  <div style="margin-top: 8px;">
                    <span style="display:inline-block">{{item.CONSTRUCTPRO}}</span>
                  </div>
                  <div style="margin-top: 8px;">
                    <span class="gray-label"
                          style="margin-right: 10px;">填写人:</span>
                    {{item.INPUTERFULLNAME}}
                  </div>
                  <div style="margin-top: 8px;">
                    <span class="gray-label"
                          style="margin-right: 5px;">填写时间:</span>
                    {{item.INPUTDATE.substring(0,10)}}
                  </div>
                </div>
              </div>
            </group>-->
            <div v-for="(item, i) in list" :key="i">
              <swipeout>
                <swipeout-item>
                  <div slot="right-menu">
                    <swipeout-button
                      type="warn"
                      v-if="item.INPUTERNAME == userName && item.RESTATE == '0'"
                      @click.native="cancelInspection(item.GUID)"
                    >撤销</swipeout-button>
                    <swipeout-button type="default" v-else>撤销</swipeout-button>
                  </div>
                  <div
                    slot="content"
                    style="display:flex;border: 1px solid #f5f5f5;"
                    @click="openInfo(item)"
                  >
                    <div
                      class="more-box"
                      style="margin-left: 30px;margin-right: 30px;margin-bottom: 15px;margin-top: 15px;width:100%"
                    >
                      <div class="project_style">
                        <span style="display:inline-block">{{item.CONSTRUCTPRO}}</span>
                      </div>
                      <div class="state_time_style">
                        <div class="fill_user">
                          <span class="gray-label" style="margin-right: 10px;">填写人:</span>
                          {{item.INPUTERFULLNAME}}
                        </div>
                        <div class="fill_time">
                          <span class="gray-label" style="margin-right: 5px;">填写时间:</span>
                          {{item.INPUTDATE.substring(0,10)}}
                        </div>
                      </div>
                    </div>
                  </div>
                </swipeout-item>
              </swipeout>
            </div>
          </div>

          <div v-if="flagR">
            <group v-for="(item, i) in listR" gutter="-1px" :key="i">
              <div title :border-intent="false" @click="openInfoR(item)">
                <div
                  class="more-box"
                  style="margin-left: 30px;margin-right: 30px;margin-bottom: 15px;margin-top: 15px;"
                >
                  <!-- <div class="box-bar">
              <div style="font-size:16px">{{item.HAZARDCLAUSE}}</div>
                  </div>-->
                  <div class="project_style">
                    <!-- <span class="gray-label" style="margin-right: 10px;"></span> -->
                    <!-- <span style="margin-right: 26px;margin-left: 46px;display:inline-block">{{item.INPUTERFULLNAME}}填写的安全检查表单</span> -->
                    <span style="display:inline-block">{{item.PRJNAME}}</span>
                    <!-- <span class="gray-label" style="margin-right: 10px;">填写人</span>
                    <span class="hidanger-chosetaskfontshow">{{item.INPUTERFULLNAME}}</span>-->
                  </div>
                  <!-- <div style="margin-top: 8px;">
              <span class="gray-label" style="margin-right: 10px;">当前环节</span>
              {{item.CONSTURCTPRO}}
                  </div>-->
                  <div class="fill_user" style="margin-top:8px">
                    <span class="gray-label" style="margin-right: 10px;">填写人:</span>
                    {{item.INPUTERFULLNAME}}
                  </div>
                  <div class="state_time_style">
                    <div name="state">
                      <img
                        src="@/assets/img/待整改@2x.png"
                        v-if="item.STATE=='未确认'"
                        style="height: 24px;"
                      />
                      <img
                        src="@/assets/img/整改中@2x.png"
                        style="height:24px"
                        v-if="item.STATE=='整改中'"
                      />
                      <img
                        src="@/assets/img/暂存@2x.png"
                        style="height: 24px;"
                        v-if="item.STATE=='暂存'"
                      />
                      <img
                        src="@/assets/img/已整改@2x.png"
                        style="height: 24px;"
                        v-if="item.STATE=='已完成'"
                      />
                    </div>
                    <div class="fill_time">
                      <span class="gray-label" style="margin-right: 5px;">填写时间:</span>
                      {{item.INPUTDATE.substring(0,10)}}
                    </div>
                  </div>
                </div>
              </div>
            </group>
          </div>
        </scroller>
      </v-touch>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { Swipeout, SwipeoutItem, SwipeoutButton } from "vux";
export default {
  name: "hidangerlist",
  // inject:['reload'],
  components: {
    Swipeout,
    SwipeoutItem,
    SwipeoutButton
  },
  mounted() {
    console.log("proid", this.proId);
    this.checkSelectR();
    this.getData(
      res => {
        if (res.status == "200" && res.data.datas.length > 0) {
          this.list = [...this.list, ...res.data.datas]; //TODO 啥意思
          this.page++;
          done();
        } else {
          done(true); //有错误的情况或者没有记录，传参true
        }
      },
      () => {}
    );
    this.getDataR(
      res => {
        if (res.status == "200" && res.data.datas.length > 0) {
          this.listR = [...this.listR, ...res.data.datas]; //TODO 啥意思
          this.pageR++;
          done();
        } else {
          done(true); //有错误的情况或者没有记录，传参true
        }
      },
      () => {}
    );
  },
  data() {
    return {
      list: [],
      listR: [],
      page: 1,
      pageR: 1,
      keyword: "",
      createPop: false, //弹出层是否创建
      loading: false, //下拉刷新时禁止无限加载
      //currentTab:'待整改',
      //tabs:['待整改','已整改']
      pro: this.$route.query.pro,
      proId: this.$route.query.proId,
      proDept: this.$route.query.proDept,
      pmid:
        this.$route.query.pmid === ""
          ? this.$route.query.proId
          : this.$route.query.pmid,
      site: this.$route.query.site,
      guid: "",
      flagC: true,
      flagR: false,
      checkSelect: "",
      dangerArr: this.$store.state.dangerArr,
      userName: this.$store.state.user.loginId,
      pmname_back: this.$route.query.pmname_back, //整改单选项目时返回的项目部名称
      pmid_back: this.$route.query.pmid_back, //整改单选项目时返回的项目部ID
      time: 0, //第一次进入页面标志
      tempTitle: "全部项目"
      //proName:'',
    };
  },
  methods: {
    selectPro(val) {
      this.proId = val.id;
      this.proDept = val.pname;
      this.pmid = val.pmid;
      this.pro = val.name;
    },
    selectAllPro(val) {
      this.tempTitle = val;
    },
    cancelInspection(GUID) {
      var params =
        '{"_method":"formService.deleteFormData","requestEventData":{"eventType":"uniformToolbarEvent","formType":0,"bizObjId":"PMHSE_INSPECTION","formId":"PMHSE_INSPECTION","buttonId":""},"formData":{"objName":"PMHSE_INSPECTION","params":[{"GUID":' +
        GUID +
        '}],"pks":["GUID"],"flowBizFields":[]}}';
      this.$ajax({
        url: this.COMMON_URL,
        method: "post",
        // data: this.signMD5({
        //   FixJSON: params
        // })
        data: {
          FixJSON: params
        }
      }).then(res => {
        this.refresh(() => {});
      });
    },
    //切换至离线模式
    changeToOffline() {
      this.$router.push({
        name: "offlinehidangerlist",
        path: "/offlinehidangerlist"
      });
    },
    checkSelectR() {
      if (this.$route.query.flag == 1) {
        this.flagC = false;
        this.flagR = true;
        console.log("换纸");
      } else {
        this.flagC = true;
        this.flagR = false;
        console.log("不换");
      }
    },
    onCheckClick() {
      this.flagC = true;
      this.flagR = false;
      //$(".check").show();
      //console.log(this.flag)
    },
    onRectifyClick() {
      this.flagC = false;
      this.flagR = true;
      //$(".check").hide();
      //console.log(this.flag)
    },
    onSwipeRight() {
      this.$router.push("/index/home");
    },
    backhome() {
      this.$router.push("/index/home");
    },
    getDataR(callback, failed) {
      var filter = "STATE <> '废弃'";
      if (!this.pmid_back) {
        filter =
          "STATE <> '废弃'" +
          (this.dangerArr.includes("0")
            ? ""
            : "and SYSPRJID IN (" + this.dangerArr.join(",") + ")");
      } else {
        filter = "STATE <> '废弃' AND SYSPRJID='" + this.pmid_back + "'";
      }
      var params =
        '{"_method":"component.getListData","_param":{"bizObj":"PMHSE_RECTIFY","service":"selectMore","fields":"*","filter":' +
        '"' +
        filter +
        '"' +
        ',"currentPageIndex":' +
        this.pageR +
        ',"pageSize":50,"orderList":[{"field":"NUMZZ","order":"DESC"}],"QueryFormData":""}}';
      this.$ajax({
        method: "post",
        url: this.COMMON_URL, //+ "?_objName=PMHSE_RECTIFY&_viewId=PMHSE_RECTIFY",
        // data: this.signMD5({
        //   FixJSON: params
        // })
        data: {
          FixJSON: params
        }
      })
        .then(res => {
          // debugger
          // console.log(res)
          callback(res);
          // this.listR = [...res.data.datas];
        })
        .catch(err => {
          failed();
        });
    },
    getData(callback, failed) {
      var filter = "1=1";
      //console.log(this.proId);
      if (!this.proId) {
        filter =
          "ISDELETE IS NULL " +
          (this.dangerArr.includes("0")
            ? ""
            : "   and PROJECTID IN (" + this.dangerArr.join(",") + ")");
      } else {
        filter = "ISDELETE IS NULL AND PROJECTID='" + this.proId + "'";
      }
      var params =
        '{"_method":"component.getListData","_param":{"bizObj":"PMHSE_INSPECTION","service":"selectMore","fields":"*","filter":' +
        '"' +
        filter +
        '"' +
        ',"currentPageIndex":' +
        this.page +
        ',"pageSize":50,"orderList":[{"field":"NUMZZ","order":"desc"}],"QueryFormData":""}}';
      this.$ajax({
        method: "post",
        url: this.COMMON_URL, //+ "?_objName=PMHSE_INSPECTION&_viewId=PMHSE_INSPECTION",
        // data: this.signMD5({
        //   FixJSON: params
        // })
        data: {
          FixJSON: params
        }
      })
        .then(res => {
          // debugger
          //console.log(res)
          callback(res);
          // this.list = [...res.data.datas];
          // console.log(this.list);
          // this.page++;
        })
        .catch(err => {
          failed();
        });
      // this.reload();
      //this.$router.go(0)
    },
    openInfo(item) {
      this.$router.push({
        path: "/hidangereport/InspectionInfo1",
        query: {
          GUID: item.GUID,
          pro: item.CONSTRUCTPRO,
          site: item.CENTERPOSITION
          //pmname: item.PRODEPT
        }
      });
    },
    openInfoR(item) {
      this.$router.push({
        path: "/hidangereport/rectifyInfo1",
        query: { GUID: item.GUID }
      });
    },
    infinite(done) {
      //上划加载方法
      // console.log("infinite");
      // console.log(this.page);
      if (this.flagC) {
        this.getData(
          res => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == "200" && res.data.datas.length > 0) {
              this.list = [...this.list, ...res.data.datas]; //TODO 啥意思
              this.page++;
              done();
            } else {
              done(true); //有错误的情况或者没有记录，传参true
            }
          },
          () => {
            done(true);
          }
        );
      }
      if (this.flagR) {
        this.getDataR(
          res => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == "200" && res.data.datas.length > 0) {
              this.listR = [...this.listR, ...res.data.datas]; //TODO 啥意思
              this.pageR++;
              done();
            } else {
              done(true); //有错误的情况或者没有记录，传参true
            }
          },
          () => {
            done(true);
          }
        );
      }
    },
    refresh(done) {
      this.page = 1;
      this.pageR = 1;
      // // console.log("refresh");
      // // console.log(this.page);
      // debugger
      // this.loading = true;
      if (this.flagC) {
        this.getData(
          res => {
            if (res.status == "200" && res.data.datas.length > 0) {
              this.list = [...res.data.datas];
              this.page++;
              done();
            } else {
              done(true);
            }
          },
          () => {
            done(true);
          }
        );
      }
      if (this.flagR) {
        this.getDataR(
          res => {
            if (res.status == "200" && res.data.datas.length > 0) {
              this.listR = [...res.data.datas];
              this.pageR++;
              done();
            } else {
              done(true);
            }
          },
          () => {
            done(true);
          }
        );
      }
    },
    search(val) {
      this.page = 1;
      this.keyword = val;
      this.getData(
        res => {
          if (res.status == "200" && res.data.datas.length > 0) {
            this.list = [...res.data.datas];
            this.page++;
          } else {
            this.list = [];
          }
        },
        () => {
          this.list = [];
        }
      );
    },
    dangereport() {
      //this.$router.push('/hidangereport/InspectionInfo');
      //this.$router.replace('/reportdanger')
      //console.log(this.proId)
      //console.log(this.proDept)
      console.log("!!!!1", this.proId);
      if (this.flagC)
        if (this.checkNetWork()) {
          this.$router.push({
            path: "/hidangereport/InspectionInfo",
            query: {
              centerPosition: this.site,
              pro: this.pro,
              proId: this.proId,
              pmname: this.proDept,
              pmid: this.pmid
            }
          });
        } else {
          //执行离线状态时的任务
          const _this = this;
          this.$vux.confirm.show({
            // 组件除show外的属性
            title: "提示",
            content: "当前手机处于离线状态，确定启用离线功能？",
            onCancel() {},
            onConfirm() {
              _this.$router.push({
                path: "/hidangereport/InspectionInfo",
                query: {
                  centerPosition: _this.site,
                  pro: _this.pro,
                  proId: _this.proId,
                  pmname: _this.proDept,
                  pmid: _this.pmid
                }
              });
            }
          });
        }
      else
        this.$router.push({
          path: "/hidangereport/rectifyInfo",
          query: { pro: this.pmname_back, proId: this.pmid_back }
        });
    },
    changeType(val) {
      this.page = 1;
      this.currentTab = val;
      this.list = [];
      this.$refs.taskScroller.finishInfinite(false);
      /* this.getData((res) => {
           //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
           if (res.status == '200' && res.data.datas.length > 0) {
               this.list = [...this.list, ...res.data.datas]//TODO 啥意思
               this.page++;
               done();
           } else {
             done(true)//有错误的情况或者没有记录，传参true
           }
         }, () => {
           done(true)
       });*/
    },
    showPro(pro) {
      return !!pro ? pro : "全部项目";
    }
  },
  // subYear(item.INPUTDATE){
  //   console.log(item.INPUTDATE);
  //   return time
  // },
  computed: {
    // userInfo () {
    //   return this.$store.state.user
    // },
    // mainPop () {
    //   return this.$store.state.mainPop
    // }
    row() {
      //页面中使用row来指代当前记录
      // console.log(this.$store.state.currentRow);
      return this.$store.state.currentRow;
    }
  },
  watch: {
    proId: function(newId, old, Id) {
      // this.reload()
      // location.reload()
      //console.log("刷新")
    }
  }
};
</script>

<style scoped>
/* .transition-view /deep/ .vux-header .vux-header-left .left-arrow:before {
  border-color: rgb(35, 90, 230);
}
.transition-view /deep/ .vux-header {
  background-color: rgb(255, 255, 255) !important;
}
.transition-view .vux-header /deep/ .vux-header-title {
  color: #262a34;
} */
.card {
  background: #fff;
  margin: 10px 16px;
  padding: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.card-title {
  font-size: 18px;
}
.warning {
  color: red;
  padding: 0 5px;
  background-color: pink;
  text-align: center;
  width: 140px;
  line-height: 30px;
  font-size: 14px;
}

.gray-label {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(175, 175, 175, 1);
  line-height: 20px;
}

#headeright {
  position: absolute;
  right: 0px;
  top: 5px;
  display: block;
  font-size: 14px;
  line-height: 21px;
  width: 20px;
  height: 20px;
}
.box-bar:before {
  content: "";
  display: block;
  height: 17px;
  position: absolute;
  border-left: 4px solid #a7aeff;
  left: 14px;
  top: 18px;
}
.hidanger-chosetaskfontshow {
  max-width: 70px;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  /*设置overflow后基线位置改变，因此需要调整*/
  vertical-align: bottom;
}
.changeToOffline {
  margin-right: auto;
  width: 25px;
  height: 25px;
  /* margin-top: 10px; */
}
.add_form {
  position: absolute;
  height: 50px;
  width: 90%;
  top: 90%;
  z-index: 999;
  left: 5%;
  background: #4d86ff;
  color: #ffffff;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .transition-view .vux-header .vux-header-left /deep/.left-arrow:before{
   border: 1px solid rgb(228, 15, 15);
 } */
.add_form_new {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 80%;
  z-index: 999;
  left: 80%;
  background: rgba(77, 134, 255, 1);
  box-shadow: 0px 1px 13px 0px rgba(79, 132, 220, 0.6);
  border-radius: 50%;
  color: #ffffff;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fill_time {
  margin-left: auto;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(175, 175, 175, 1);
  line-height: 20px;
}
.fill_user {
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(175, 175, 175, 1);
  line-height: 20px;
}
/* .group-control /deep/ .weui-cells::after{
  display: none
} */
.state_time_style {
  display: flex;
  margin-top: 8px;
}
.sup {
  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #f5f5f5;
}
.project_style {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(25, 25, 25, 1);
  line-height: 20px;
  margin-top: 8px;
}
.select_pro {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 600;
  color: rgba(25, 25, 25, 1);
  line-height: 20px;
}
</style>
